<h1>
  Job execution <strong *ngIf="!loading">{{ execution.name }} ({{ execution.jobExecutionId }})</strong>
</h1>
<div *ngIf="!loading">
  <div class="datagrid-action-bar">
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="restart()"
      [disabled]="execution.status !== 'FAILED' && execution.status !== 'STOPPED' && execution.status !== 'ERROR'"
    >
      Restart the job
    </button>
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="stop()"
      [disabled]="execution.status === 'FAILED' || execution.status === 'ERROR' || execution.status === 'COMPLETED'"
    >
      Stop the job
    </button>
    <button class="btn btn-sm btn-secondary" grafanaDashboardJobExecution [jobExecution]="execution">
      Grafana Dashboard
    </button>
  </div>

  <div class="clr-row">
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Information" keyContext="job" name="{{ execution.jobExecutionId }}" id="info">
        <ng-template>
          <div class="block card-block-keyvalue lg-key" *ngIf="!loading">
            <div class="row">
              <div class="key">Id</div>
              <div class="value">{{ execution.jobExecutionId }}</div>
            </div>
            <div class="row">
              <div class="key">Job Name</div>
              <div class="value">{{ execution.name }}</div>
            </div>
            <div class="row">
              <div class="key">Job Instance</div>
              <div class="value">{{ execution.jobInstanceId }}</div>
            </div>
            <div class="row">
              <div class="key">Task Execution Id</div>
              <div class="value">
                <a routerLink="/tasks-jobs/task-executions/{{ execution.taskExecutionId }}">{{
                  execution.taskExecutionId
                }}</a>
              </div>
            </div>
            <div class="row">
              <div class="key">Job Parameters</div>
              <div class="value">{{ execution.jobParametersString }}</div>
            </div>
            <div class="row">
              <div class="key">Start Time</div>
              <div class="value">{{ execution.startTime | datetime }}</div>
            </div>
            <div class="row">
              <div class="key">End Time</div>
              <div class="value">{{ execution.endTime | datetime }}</div>
            </div>
            <div class="row">
              <div class="key">Duration</div>
              <div class="value">{{ execution.startTime | duration: execution.endTime }}</div>
            </div>
            <div class="row">
              <div class="key">Status</div>
              <div class="value">
                <span class="{{ execution.labelStatusClass() }}">{{ execution.status }}</span>
              </div>
            </div>
            <div class="row">
              <div class="key">Exit Code</div>
              <div class="value">
                <span class="{{ execution.labelExitCodeClass() }}">{{ execution.exitCode }}</span>
              </div>
            </div>
            <div class="row">
              <div class="key">Exit Message</div>
              <div class="value">{{ execution.exitMessage }}</div>
            </div>
            <div class="row">
              <div class="key">Step Execution Count</div>
              <div class="value">{{ execution.stepExecutionCount }}</div>
            </div>
          </div>
        </ng-template>
      </app-view-card>
    </div>
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Task" keyContext="job" name="{{ execution.jobExecutionId }}" id="task">
        <ng-template>
          <div *ngIf="!loadingTask">
            <div class="block card-block-keyvalue" *ngIf="task">
              <div class="row">
                <div class="key">Name</div>
                <div class="value">{{ task.name }}</div>
              </div>
              <div *ngIf="task.description" class="row">
                <div class="key">Description</div>
                <div class="value">{{ task.description }}</div>
              </div>
              <div class="row">
                <div class="key">Definition</div>
                <div class="value">
                  <span class="dsl-text">{{ task.dslText }}</span>
                </div>
              </div>
              <div class="row">
                <div class="key">Status</div>
                <div class="value">
                  <span class="{{ task.labelStatusClass() }}">{{ task.status }}</span>
                </div>
              </div>
              <div class="row">
                <div class="key">Applications</div>
                <div class="value">
                  <div *ngIf="!loadingApplications">
                    <div *ngFor="let app of applications">
                      <strong>{{ app.name }}</strong
                      >&nbsp;
                      <span class="label label-app {{ app.type }}">{{ app.origin }}</span>
                    </div>
                  </div>
                  <div *ngIf="loadingApplications">
                    <clr-spinner clrInline clrSmall></clr-spinner>
                    Loading application(s)...
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!task">No task found.</div>
          </div>
          <div *ngIf="loadingTask">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading task...
          </div>
        </ng-template>
        <div class="card-footer" *ngIf="task">
          <button class="btn btn-sm btn-secondary" (click)="navigateTask()">View task</button>
          <button type="button" class="btn btn-sm btn-secondary" (click)="relaunch()">Relaunch Task</button>
        </div>
      </app-view-card>
      <app-view-card titleModal="Task execution" keyContext="job" name="{{ execution.jobExecutionId }}" id="execution">
        <ng-template>
          <div class="block card-block-keyvalue lg-key" *ngIf="!loadingExecution">
            <div *ngIf="taskExecution">
              <div class="row">
                <div class="key">Execution Id</div>
                <div class="value">{{ taskExecution.executionId }}</div>
              </div>
              <div class="row">
                <div class="key">Arguments</div>
                <div class="value">
                  <div *ngIf="taskExecution.getArgumentsToArray().length > 0">
                    <div *ngFor="let arg of taskExecution.getArgumentsToArray()">
                      {{ arg[0] }}:
                      <strong>{{ arg[1] }}</strong>
                    </div>
                  </div>
                  <div *ngIf="taskExecution.getArgumentsToArray().length === 0">N/A</div>
                </div>
              </div>
              <div class="row">
                <div class="key">External Execution Id</div>
                <div class="value">
                  {{ taskExecution.externalExecutionId || 'N/A' }}
                </div>
              </div>
              <div class="row">
                <div class="key">Job Execution Ids</div>
                <div class="value">
                  <a
                    [routerLink]="'/tasks-jobs/job-executions/' + jobExecutionId"
                    *ngFor="let jobExecutionId of taskExecution.jobExecutionIds"
                  >
                    {{ jobExecutionId }}
                  </a>
                  <div *ngIf="taskExecution.jobExecutionIds?.length === 0">N/A</div>
                </div>
              </div>
              <div class="row">
                <div class="key">Batch Job</div>
                <div class="value">
                  <clr-icon *ngIf="taskExecution.jobExecutionIds?.length > 0" shape="check"></clr-icon>
                  <clr-icon *ngIf="taskExecution.jobExecutionIds?.length === 0" shape="success-standard"></clr-icon>
                </div>
              </div>
              <div class="row">
                <div class="key">Start Time</div>
                <div class="value">
                  {{ taskExecution.startTime | datetime }}
                </div>
              </div>
              <div class="row">
                <div class="key">End Time</div>
                <div class="value">
                  {{ taskExecution.endTime | datetime }}
                </div>
              </div>
              <div class="row">
                <div class="key">Duration</div>
                <div class="value">
                  {{ taskExecution.startTime | duration: taskExecution.endTime }}
                </div>
              </div>
              <div class="row">
                <div class="key">Exit Code</div>
                <div class="value">
                  {{ taskExecution.exitCode }}
                </div>
              </div>
              <div class="row">
                <div class="key">Exit Message</div>
                <div class="value">
                  {{ taskExecution.exitMessage || 'N/A' }}
                </div>
              </div>
              <div class="row">
                <div class="key">Resource URL</div>
                <div class="value">
                  {{ taskExecution.resourceUrl || 'N/A' }}
                </div>
              </div>
              <div class="row">
                <div class="key">Application Properties</div>
                <div class="value">
                  <div *ngIf="taskExecution.getAppPropertiesToArray().length > 0">
                    <div *ngFor="let arg of taskExecution.getAppPropertiesToArray()">
                      {{ arg.key }}:
                      <strong>{{ arg.value }}</strong>
                    </div>
                  </div>
                  <div *ngIf="taskExecution.getAppPropertiesToArray().length === 0">N/A</div>
                </div>
              </div>
              <div class="row">
                <div class="key">Platform Properties</div>
                <div class="value">
                  <div *ngIf="taskExecution.getDeploymentPropertiesToArray().length > 0">
                    <div *ngFor="let arg of taskExecution.getDeploymentPropertiesToArray()">
                      {{ arg[0] }}:
                      <strong>{{ arg[1] }}</strong>
                    </div>
                  </div>
                  <div *ngIf="taskExecution.getDeploymentPropertiesToArray().length === 0">N/A</div>
                </div>
              </div>
            </div>
            <div *ngIf="!taskExecution">No execution yet.</div>
          </div>
          <div *ngIf="loadingExecution">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading task...
          </div>
        </ng-template>
        <div class="card-footer" *ngIf="execution">
          <button class="btn btn-sm btn-secondary" (click)="navigateTaskExecution()">View task execution</button>
          <button class="btn btn-sm btn-secondary" (click)="viewLog()" *ngIf="hasLog()">View log</button>
        </div>
      </app-view-card>
    </div>
  </div>
  <div class="clr-row">
    <div class="clr-col-lg-12 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Steps" keyContext="job" name="{{ execution.jobExecutionId }}" id="steps">
        <ng-template>
          <table class="table table-noborder table-compact" style="margin: 0">
            <thead>
              <tr>
                <th class="left">Step Id</th>
                <th class="left">Step Name</th>
                <th class="left">Reads</th>
                <th class="left">Writes</th>
                <th class="left">Commits</th>
                <th class="left">Rollbacks</th>
                <th class="left">Duration</th>
                <th class="left">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let step of execution.stepExecutions">
                <td class="left">
                  <a routerLink="/tasks-jobs/job-executions/{{ execution.jobExecutionId }}/{{ step.id }}">{{
                    step.id
                  }}</a>
                </td>
                <td class="left">
                  <a routerLink="/tasks-jobs/job-executions/{{ execution.jobExecutionId }}/{{ step.id }}">{{
                    step.name
                  }}</a>
                </td>
                <td class="left">{{ step.readCount }}</td>
                <td class="left">{{ step.writeCount }}</td>
                <td class="left">{{ step.commitCount }}</td>
                <td class="left">{{ step.rollbackCount }}</td>
                <td class="left">{{ step.startTime | duration: step.endTime }}</td>
                <td class="left">
                  <span class="{{ step.labelStatusClass() }}">{{ step.status }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </ng-template>
      </app-view-card>
    </div>
  </div>
</div>

<div *ngIf="loading" style="padding: 1rem 0">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading job execution...
</div>

<app-confirm #restartModal (onConfirmed)="restartJob()" title="Confirm restart the job execution" yes="Restart">
  This action will restart the steps failed of the job execution
  <strong>{{ execution?.name }} ({{ execution?.jobExecutionId }})</strong>.<br />
  Are you sure?
</app-confirm>

<app-confirm #stopModal (onConfirmed)="stopJob()" title="Confirm stop the job execution" yes="Stop">
  This action will stop the job execution
  <strong>{{ execution?.name }} ({{ execution?.jobExecutionId }})</strong>.<br />
  Are you sure?
</app-confirm>

<app-task-execution-log #logModal></app-task-execution-log>
